<template>
      <router-link to="/" class="nav-link">主视图</router-link>
      <router-link to="/designer" class="nav-link">设计器</router-link>
      <router-link to="/element-test" class="nav-link">组件测试</router-link>
    
  <div class="main-view">
    <h1>Element Plus 拖拽容器</h1>
    <el-button type="primary" @click="addItem">添加新项</el-button>
    <DragContainer ref="dragContainer" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DragContainer from '@/components/DragContainer/index.vue'

const dragContainer = ref<InstanceType<typeof DragContainer>>()

const addItem = () => {
  if (dragContainer.value?.items) {
    const items = dragContainer.value.items
    const newItem = {
      id: Date.now().toString(),
      x: Math.random() * 300,
      y: Math.random() * 300,
      width: 100,
      height: 100,
      content: `Item ${items.length + 1}`
    }
    items.push(newItem)
  } else {
    console.warn('DragContainer items not initialized')
  }
}
</script>

<style scoped>
.main-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}
</style>